<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="home/layout::html-head(pageTitle='编辑个人资料 | ' + ${titleSuffix},pageKey=${pageKey},pageDesc=${pageDesc})" />
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
    <body class="layout-top-nav skin-black-light">
        <div class="wrapper">
            <header class="main-header" th:include="home/layout::main-header">
            </header>
            <!-- Full Width Column -->
            <div class="content-wrapper">
                <div class="container">
                    <!-- Main content -->
                    <section class="content">
                        <!-- /.box -->
                        <th:block th:include="home/layout::user-left-bar" />
                        <div class="col-md-9" id="app-user-edit">
                            <div th:class="|panel panel-default|">
                                <div class="panel-body ">
                                    <h2><i class="fa fa-cog" aria-hidden="true"></i> 编辑个人资料</h2>
                                    <hr>
                                    <form class="form-horizontal" method="POST" accept-charset="UTF-8" enctype="multipart/form-data">
                                        <div class="form-group">
                                            <label for="nickname" class="col-sm-2 control-label">昵称</label>
                                            <div class="col-sm-6">
                                                <input id="nickname" v-model="form.field.nickname" class="form-control" type="text">
                                            </div>

                                            <div class="col-sm-4 help-block">
                                                用户名只能修改一次，请谨慎操作
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="gender" class="col-sm-2 control-label">性别</label>
                                            <div class="col-sm-6">
                                                <select id="gender" class="form-control" v-model="form.field.gender">
                                                    <option value="" selected="">未选择</option>
                                                    <option value="male">男</option>
                                                    <option value="female">女</option>
                                                </select>
                                            </div>

                                            <div class="col-sm-4 help-block"></div>
                                        </div>

                                        <div class="form-group">
                                            <label for="githubName" class="col-sm-2 control-label">GitHub Name</label>
                                            <div class="col-sm-6">
                                                <input id="githubName" class="form-control" v-model="form.field.githubName" type="text">
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                请跟 GitHub 上保持一致
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="email" class="col-sm-2 control-label">邮 箱</label>
                                            <div class="col-sm-6">
                                                <input id="email" class="form-control" :value="form.field.email"  disabled type="text">
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                如：name@website.com
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="realName" class="col-sm-2 control-label">真实姓名</label>
                                            <div class="col-sm-6">
                                                <input id="realName" class="form-control" v-model="form.field.realName" type="text" >
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                如：王小明
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="city" class="col-sm-2 control-label">城市</label>
                                            <div class="col-sm-6">
                                                <input id="city" class="form-control" v-model="form.field.city"type="text">
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                如：上海、武汉
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="company" class="col-sm-2 control-label">公司</label>
                                            <div class="col-sm-6">
                                                <input id="company" class="form-control" v-model="form.field.company" type="text">
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                如：阿里巴巴
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="weiboName" class="col-sm-2 control-label">微博用户名</label>
                                            <div class="col-sm-6">
                                                <input id="weiboName" class="form-control" v-model="form.field.weiboName" type="text">
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                如：jobs
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="weiboLink" class="col-sm-2 control-label">微博个人页面</label>
                                            <div class="col-sm-6">
                                                <input id="weiboLink" class="form-control" v-model="form.field.weiboLink" type="text">
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                微博个人主页链接，如：http://weibo.com/xxx
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="personalWebsite" class="col-sm-2 control-label">个人网站</label>
                                            <div class="col-sm-6">
                                                <input id="personalWebsite" class="form-control" v-model="form.field.personalWebsite" type="text">
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                如：example.com，不需要加前缀 https://
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="wechatQrcode" class="col-sm-2 control-label">微信账号二维码</label>
                                            <div class="col-sm-6">
                                                <input id="wechatQrcode" type="file" onchange="util.uploadSingle(appUserEdit,'#app-user-edit form',this,1)" name="wechatQrcode" class="image-upload-input">
                                                <input type="hidden" v-model="form.field.wechatQrcodeText" name="wechatQrcodeText" class="upload-hidden" >
                                                <template v-if="form.field.wechatQrcodeText">
                                                    <img :src="form.field.wechatQrcodeText" width="358" height="329" />
                                                    <span class="close clear-image" onclick="util.delAttachment(appUserEdit,this)">x</span>
                                                </template>
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                你的微信个人账号，或者订阅号
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="paymentQrcode" class="col-sm-2 control-label">支付二维码</label>
                                            <div class="col-sm-6">
                                                <input id="paymentQrcode" type="file" onchange="util.uploadSingle(appUserEdit,'#app-user-edit form',this,1)" name="paymentQrcode" class="image-upload-input" value="">
                                                <input type="hidden" v-model="form.field.paymentQrcodeText" name="paymentQrcodeText" class="upload-hidden" value="">
                                                <template v-if="form.field.paymentQrcodeText">
                                                    <img :src="form.field.paymentQrcodeText" width="358" height="329" />
                                                    <span class="close clear-image" onclick="util.delAttachment(appUserEdit,this)">x</span>
                                                </template>
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                文章打赏时使用，微信支付二维码
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="introduction" class="col-sm-2 control-label">个人简介</label>
                                            <div class="col-sm-6">
                                                <textarea id="introduction" class="form-control" rows="3" v-model="form.field.introduction" cols="50" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 103px;"></textarea>
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                请一句话介绍你自己，大部分情况下会在你的头像和名字旁边显示
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="signature" class="col-sm-2 control-label">署名</label>
                                            <div class="col-sm-6">
                                                <textarea id="signature" class="form-control" rows="3" v-model="form.field.signature" cols="50" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 103px;"></textarea>
                                            </div>
                                            <div class="col-sm-4 help-block">
                                                文章署名，会拼接在每一个你发表过的帖子内容后面。支持 Markdown。
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-6">
                                                <input class="btn btn-primary" id="user-edit-submit" type="button" @click="submitForm()" value="应用修改">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <th:block th:include="home/layout::modal" />
                        </div>
                    </section>
                    <!-- /.content -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.content-wrapper -->
            <footer class="main-footer" th:include="home/layout::main-footer" />
        </div>
        <!-- ./wrapper -->
        <th:block th:include="home/layout::main-script" />

        <script>
            var appUserEdit = new Vue({
                el:'#app-user-edit',
                data () {
                    return {
                        form:{
                            field:{

                            },
                            error:{

                            }
                        },
                        dialogTitle:'',
                        dialogContent:'',
                        isSuccess:true,
                        hasError:''
                    }
                },
                created() {
                    this.getData();
                },
                methods:{
                    getData() {
                        var _this = this;

                        $.post('/user/getData',null,function(response) {
                            _this.form.field = response
                        },'json',_this);
                    },
                    submitForm() {
                        var _this = this;
                        $.post('/user/edit',this.form.field,function(response) {
                            if (response.status === true) {
                                _this.dialogTitle = "修改用户信息";
                                _this.dialogContent = "用户修改成功";
                                $('#dialogTip').modal({
                                    keyboard: true
                                })
                            } else {
                                _this.dialogTitle = "修改用户信息";
                                _this.dialogContent = response.content;
                                $('#dialogTip').modal({
                                    keyboard: true
                                })
                            }
                        },'json',_this);

                    },

                }
            });
        </script>
    </body>
</html>
